import React from 'react';
import { Loading, Tab } from '@teamix/ui';
import { YunxiaoIcon } from '@alife/devops-ui';
import PropTypes from 'prop-types';
import ListEmpty from 'atComponents/ListEmpty';
import intl from '../../locale';

const prefix = 'branch-tag-select';
export default class SelectMenu extends React.Component {
  static propTypes = {
    selectValue: PropTypes.number,
    data: PropTypes.arrayOf(PropTypes.object),
    onChange: PropTypes.func,
    isOverlayLoading: false,
  };

  static defaultProps = {
    selectValue: 0,
    data: [],
    onChange: () => {},
  };

  renderTabContent = (activeTab) => {
    const { data, selectValue } = this.props;
    // TODO 分支和tag重名的时候怎么处理
    let curData = [];
    data.forEach((item) => {
      if (item.key === activeTab) {
        curData = item.children || [];
      }
    });
    if (!curData.length) {
      const noContentText =
        activeTab === 'branch'
          ? intl.get({
              id: 'code-assets.components.branchAndTagSelect.overlay.NoBranch',
              defaultMessage: '暂无分支',
            })
          : intl.get({
              id: 'code-assets.components.branchAndTagSelect.overlay.NoTags',
              defaultMessage: '暂无标签',
            });
      return (
        <div className={`${prefix}-list`}>
          <ListEmpty
            size="small"
            type="card"
            content=""
            description={noContentText}
            image="none"
            style={{ margin: '40px 0' }}
          />
        </div>
      );
    }
    return (
      <div className={`${prefix}-list`}>
        {curData.map((item) => {
          return (
            <div
              className={`${prefix}-visible-select-item`}
              onClick={() => {
                if (item.disabled) {
                  return;
                }
                this.props.onChange(item);
              }}
            >
              <div className={`${prefix}-visible-select-item-right`}>
                {selectValue === item.value ? (
                  <YunxiaoIcon type="true-line" className="select-icon" />
                ) : null}
              </div>
              <div className={`${prefix}-visible-select-item-left`}>
                <div className="select-label">{item.label}</div>
              </div>
            </div>
          );
        })}
      </div>
    );
  };

  render() {
    const { data, isOverlayLoading, needTagSearch, activeTab } = this.props;
    return (
      <div className={`${prefix}-pop-container`}>
        {isOverlayLoading && (
          <div className="access-select-loading">
            <Loading />
          </div>
        )}

        {!isOverlayLoading && data && needTagSearch && (
          <Tab defaultActiveKey={activeTab} onChange={this.props.changeActiveTab}>
            <Tab.Item
              title={intl.get({
                id: 'code-assets.components.branchAndTagSelect.overlay.Branch',
                defaultMessage: '分支',
              })}
              key="branch"
            >
              {this.renderTabContent('branch')}
            </Tab.Item>
            <Tab.Item
              title={intl.get({
                id: 'code-assets.components.branchAndTagSelect.overlay.Label',
                defaultMessage: '标签',
              })}
              key="tag"
            >
              {this.renderTabContent('tag')}
            </Tab.Item>
          </Tab>
        )}

        {!isOverlayLoading && data && !needTagSearch && (
          <div>{this.renderTabContent('branch')}</div>
        )}
      </div>
    );
  }
}
